<template>
  <div>
    <index-top :name="userName" :is-login="isl" />
    <template>
      <div style="border-bottom: 2px solid #ff6700;height: 100px;line-height: 100px;font-size: 14px;box-sizing: border-box;">
        <div style="width: 90%;height: 40px;margin: 0 auto;">
          <div style="display: flex;">
            <div style="flex: 1;">
            <span style="font-size: 30px;">
              提交订单
            </span>
              <span style="color: gray;">
              温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
            </span>
            </div>

            <div style="width: 200px;display: flex;">
            </div>
          </div>
        </div>
      </div>
    </template>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="选择地址"
      width="800px"
      :visible.sync="open1"
      style="height: 800px"
    >
      <el-button type="primary" size="small" @click="open = true" >添加地址</el-button>

      <el-table
        v-loading="loading"
        :data="addrList"
        max-height="800">
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市"
          width="120">
        </el-table-column>
        <el-table-column
          prop="district"
          label="区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="seleteRow(scope.$index, addrList)"
              type="text"
              size="small">
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
    <el-dialog
      title="收货信息"
      width="600px"
      :visible.sync="open"
      :before-close="handleClose">
      <div>
        <!-- 添加地址表单 -->
        <el-form ref="addr" :model="addr" label-width="120px" :rules="rules">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addr.name"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="addr.phone"></el-input>
          </el-form-item>
          <el-form-item label="省市区" prop="addr">
            <el-cascader
              placeholder="填写地址"
              :options="arr"
              v-model="addr.addr"
              :props="prop"
              filterable></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="addr.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="colseList()">取消</el-button>
            <!-- 传值字符串，如果外面是双引号，里面单引号，不可都写双引号 -->
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 下面是地址列表： -->

    <el-descriptions style="margin-left: 15%;margin-right: 15%;margin-top: 20px;margin-bottom: 20px" title="收获信息" :column="2" size="size" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="open1 = true" style="margin-top: 8px">选择地址</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          收货人姓名
        </template>
        {{showaddr.name || "请选择地址"}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{showaddr.phone || "请选择地址"}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          收货地址
        </template>
        {{ (showaddr.province+" "+showaddr.city+" "+showaddr.district+" "+showaddr.address) || "请选择地址"}}
      </el-descriptions-item>
    </el-descriptions>



    <div style="background: #EEEEEE;padding: 50px 0;">
      <div style=";background: #ffffff;margin-left: 15%;margin-right: 15%">
        <el-table
          :data="data"
          style="width: 100%">
          <el-table-column
            type="index" width="100" >
          </el-table-column>

          <el-table-column
            prop="url"
            label=""
            >
            <template slot-scope="scope">
              <el-image
                style="width: 80px; height: 80px"
                :src="getUrl(scope.row.sysMedical.medImage)"
                fit="fit"></el-image>
            </template>
          </el-table-column>

          <el-table-column
            prop="name"
            label="商品名称"
           >
            <template slot-scope="scope">
              <div>{{ scope.row.sysMedical.medName }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="price"
            label="单价"
            >
            <template slot-scope="scope">
              <div>{{ scope.row.sysMedical.untitled }}元</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="num"
            label="数量"
            >
            <template slot-scope="scope">
              <div>{{ scope.row.medMunber }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="total"
            label="小计"
            >
            <template slot-scope="scope">
              <div style="color: #ff6700;">{{ scope.row.price }}元</div>
            </template>
          </el-table-column>

        </el-table>
        <div style="height: 40px;display: flex;">
          <div style="flex: 1;display: flex;">
            <div style="line-height: 40px;color: gray;margin: 0 20px;">返回</div>
          </div>
          <div style="width: 250px;display: flex;">
            <div style="font-size: 18px;color: #ff6700;line-height: 40px;width: 200px;">合计{{total}}元</div>
            <div>
              <el-button type="warning"
                         @click="finish()"
                         style=";margin-left: 20px;width: 100px;">完成订单
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <foot/>
  </div>
</template>

<script>
import {arr} from "../../../utils/addr";
import {addAddr, listAddr} from "../../../api/client/addr";
import IndexTop from "../../components/indexTop";
import {getToken} from "../../../utils/auth";
import {isLogin} from "../../../utils/request";
import Foot from "../../components/foot";
import {headUrl} from "../../../utils/common";
import {addOrder} from "../../../api/client/clientorder";

export default {
  name: "payOrder",
  components: {Foot, IndexTop},
  data() {
    return {
      isl:false,
      userName:"",
      prop:{
        value:'label'
      },
      arr,
      addr: {},
      showaddr:{},
      open: false,
      open1:false,
      addrList: [],
      // options: regionData,
      loading: false,
      data: [],
      total:0,
      rules:{
        name: [
          { required: true, message: "收货人姓名不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        addr: [
          { required: true, message: "请选择收获地址", trigger: "select" }
        ],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" }
        ],
      }
    }
  },

  created() {
    this.getUserName()
    this.getAddrList()
    this.getParams()
  },
  methods: {
    getAddrList(){
      listAddr().then(response => {
        this.addrList = response.rows;
        this.loading = false
      });
    },
    getUserName() {
      this.userName = this.$store.state.user.name;
      if (getToken()) {
        isLogin.show = true
        this.isl = isLogin.show
      } else {
        this.isl = isLogin.show
        isLogin.show = false
      }
    },

    //完成按钮
    finish(){
      let array = JSON.parse(JSON.stringify(this.data).replace(/medMunber/g,"medNumber"))
      if (Object.keys(this.showaddr).length != 0){
        this.showaddr.price = this.total
        this.showaddr.orderMeds = array
        console.log(this.showaddr)
        addOrder(this.showaddr).then(response => {
          this.$modal.msgSuccess("下单成功，准备返回首页");
          this.$router.push("/index")
        });
      }else {
        this.$message({
          type: "error",
          message: "未选择地址!"
        })
      }


    },
    colseList(){
      this.open = false
    },
    handleClose(done) {
      this.colseList()
    },
    //清空表单
    rest(){
      this.addr = []
    },
    seleteRow(index,list){
      this.showaddr= list[index]
      this.open1 = false
    },
    onSubmit(){
      this.$refs["addr"].validate(valid => {
          if (valid) {
            this.loading = true
            this.addr.province = this.addr.addr[0]
            this.addr.city= this.addr.addr[1]
            this.addr.district= this.addr.addr[2]
            addAddr(this.addr).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.rest();
              this.getAddrList();
            });
          }
      })
    },
    totalPrice() {
      this.total = 0
      this.data.forEach(item =>{
        this.total+=item.price
      })
    },
    getParams () {
      // 取到路由带过来的参数
      let routerParams = this.$route.params.dataObj
      // 将数据放在当前组件的数据内
      this.data =routerParams
      this.totalPrice()
    },
    getUrl(url) {
      return headUrl + url
    },
  }
}
</script>

<style scoped>

</style>
